<template>
  <div>
    <van-row @click="openModal">
      <van-col span="6">
        <img :src="avatarSrc" alt />
      </van-col>
      <van-col span="12">{{ userNickname }}</van-col>
      <van-col span="6">
        <van-icon name="arrow" />
      </van-col>
    </van-row>
    <van-grid :column-num="3" square>
      <van-grid-item icon="label-o" text="我的订单" />
      <van-grid-item icon="bill-o" text="优惠券" />
      <van-grid-item icon="goods-collect-o" text="礼品卡" />
      <van-grid-item icon="location-o" text="我的收藏" />
      <van-grid-item icon="flag-o" text="我的足迹" />
      <van-grid-item icon="contact" text="会员福利" />
      <van-grid-item icon="aim" text="地址管理" />
      <van-grid-item icon="warn-o" text="账号安全" />
      <van-grid-item icon="service-o" text="联系客服" />
      <van-grid-item icon="question-o" text="帮助中心" />
      <van-grid-item icon="smile-comment-o" text="意见反馈" />
    </van-grid>
    <!-- 弹出层 -->
    <van-popup v-model="isShowLoginBox">
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            >提交</van-button
          >
        </div>
      </van-form>
    </van-popup>
  </div>
</template>

<script>
import { GetUserIndexData } from "@/request/api";
export default {
  data() {
    return {
      isShowLoginBox: false,
      avatarSrc: require("../assets/avatar.png"),
      username: "",
      password: "",
      userNickname: "请登录账号",
    };
  },
  created() {
    //获取本地存贮的userInfo，如果可以获取得到就可以改变avatarSrc和 userNickname
    let userInfo = localStorage.getItem("userInfo");
    if (userInfo) {
      userInfo = JSON.parse(userInfo);
      this.avatarSrc = userInfo.avatar;
      this.userNickname = userInfo.nickname;
    }
  },
  methods: {
    openModal() {
      //判断用户是不是已经登录，尝试获取token。如果获取到,就直接return
      //获取不到token就表示没有登录执行this.isShowLoginBox = true
      let token = localStorage.getItem("token");
      if (token) {
        return;
      }
      this.isShowLoginBox = true;
    },
    onSubmit(values) {
      console.log("submit", values);
      let username = values["用户名"];
      let pwd = values["密码"];
      //发送登录请求
      GetUserIndexData({
        username,
        pwd,
      }).then((res) => {
        console.log(res.data);
        if (res.errno == "0") {
          //能够成功返回
          //1.提示登陆成功
          this.$toast.success("登陆成功");
          //2保存token值和保存userinfo(用户信息到本地)
          localStorage.setItem("token", res.data.token);
          localStorage.setItem("userInfo", JSON.stringify(res.data.userInfo));

          //有点快搞个过度的时间
          setTimeout(() => {
            //3.关闭模态窗口
            this.isShowLoginBox = false;
            //4.修改用户昵称和登陆头像
            this.avatarSrc = res.data.userInfo.avatar;
            this.userNickname = res.data.userInfo.nickname;
          }, 1000);
        } else {
          //失败就打印后端给我们的这个错误信息
          console.log(res.errmsg);
        }
      });
    },
  },
};
</script>
 
<style lang = "less" scoped>
.van-row {
  padding: 0.2rem 4%;
  background: #333;
  color: #fff;
  .van-col {
    line-height: 0.7rem;
    font-size: 0.18rem;
    img {
      width: 0.7rem;
      border-radius: 50%;
      display: block;
    }
    &:last-child {
      text-align: right;
    }
  }
}
.van-popup {
  width: 85%;
}
</style>